<template>
    <layout-nv>
        <div class="content-block">
            <router-link v-for="item in category" key="item.id"  class="button" :to="{name:'Index', query: {id : item.id}}" >{{item.name}}</router-link>
            <a href="#" class="button">职场</a>
            <a href="#" class="button">write a novel</a>
        </div>
    </layout-nv>
</template>

<script>
    import LayoutNv from '../layout/LayoutNv.vue'

    export default {
        name: 'Category',
        components:{
            LayoutNv
        },
        data(){
            return{
                category: {}
            }
        },
        created(){
            var _this = this;
            var u = process.env.HOST_URL + '/user/index/category'
            this.$http.get(u).then(function (res) {
                if(typeof res.status === 'undefined' || 200 !== res.status){
                    console.log(res);return;
                }
                this.category = res.body;
            })
        }
    }
</script>

<style scoped>
    .button{
        display: inline-block;
        margin: 0 .2rem .5rem;
    }
</style>